<template>
  <div>
    <!-- <div class="cen-header1">
      <span class="title">东林厂区宏发开关展示</span>
    </div> -->
    <!-- <div class="cen-header fr display_flex3 align-items">
      <div class="display_flex3 itemscenter model_head align-items">
        <img
          src="../../assets/img/on_icon1.png"
          alt=""
          class="source_head_icon"
        />
        <div>
          <div>单位地址</div>
          <div class="model_value color1">福建省厦门市集美区侨英街道宏发</div>
          <div>开关设备有限公司</div>
        </div>
      </div>
      <div class="display_flex3 itemscenter model_head">
        <img
          src="../../assets/img/on_icon2.png"
          alt=""
          class="source_head_icon"
        />
        <div>
          <div>安全责任人</div>
          <div class="model_value color2">关云长</div>
        </div>
      </div>
      <div class="display_flex3 itemscenter model_head">
        <img
          src="../../assets/img/on_icon3.png"
          alt=""
          class="source_head_icon"
        />
        <div>
          <div>联系电话</div>
          <div class="model_value color3">15698981616</div>
        </div>
      </div>
      <div class="display_flex3 itemscenter model_head">
        <img
          src="../../assets/img/on_icon4.png"
          alt=""
          class="source_head_icon"
        />
        <div>
          <div>节点管理</div>
          <div class="model_value color4">关云长</div>
        </div>
      </div>
    </div> -->
    <div class="daterange">
      <div>
        <!-- <span class="title_name">时间： </span> -->
        <el-button-group>
          <el-button
            type="primary"
            :class="
              active_data == 1
                ? 'button_date_active'
                : 'button_date borderright'
            "
            @click="handledata(1)"
            >按日</el-button
          >
          <!-- <el-button
                    type="primary"
                    :class="
                      active_data == 3 ? 'button_date_active' : 'button_date'
                    "
                    @click="handledata(3)"
                    >按周</el-button
                  > -->
          <el-button
            type="primary"
            :class="
              active_data == 2
                ? 'button_date_active'
                : 'button_date borderright'
            "
            @click="handledata(2)"
            >按月</el-button
          >
          <el-button
            type="primary"
            :class="active_data == 3 ? 'button_date_active' : 'button_date '"
            @click="handledata(3)"
            >按年</el-button
          >
        </el-button-group>
      </div>
      <div v-if="active_data == 1">
        <el-date-picker
          v-model="datavalue"
          type="daterange"
          value-format="YYYY-MM-DD"
          range-separator="至"
          @change="changedata"
          :clearable="false"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <div v-if="active_data == 2">
        <el-date-picker
          type="month"
          v-model="m_y_value"
          @change="changedata"
          value-format="YYYY-MM"
          placeholder="选择月份"
        />
      </div>
      <div v-if="active_data == 3">
        <el-date-picker
          v-model="m_y_value"
          @change="changedata"
          value-format="YYYY"
          type="year"
          placeholder="选择年份"
        />
      </div>
      <el-button
        type="primary"
        class="icon-search"
        icon="el-icon-search"
        @click="handleSearch"
        v-if="is_data_disabled"
        >查询</el-button
      >
      <!-- <el-button
        type="primary"
        class="icon-search"
        @click="handleExport"
        v-if="is_data_disabled"
        >导出</el-button
      > -->
    </div>
    <div class="display_flex3 align-items electricityNum">
      <div
        class="icon-search display_flex3 align-items color333 font-weight400"
      >
        <img class="icon2" src="../../assets/img/icon1.png" />
        用电量(度)：<span
          style="font-size: 24px; font-weight: bold; color: #1890ff"
          >{{ electrodata.totalPower || 0 }}</span
        >
      </div>
      <div
        class="icon-search display_flex3 align-items color333 font-weight400"
      >
        <img class="icon2" src="../../assets/img/icon1.png" />环比：<span
          >{{ electrodata.chainRate || 0 }}%</span
        >
      </div>
      <div
        class="icon-search display_flex3 align-items color333 font-weight400"
      >
        <img class="icon2" src="../../assets/img/icon1.png" />同比：<span
          >{{ electrodata.sameCompareRate || 0 }}%</span
        >
      </div>
    </div>
    <div class="cen-header2 fr">
      <div class="electro-charts">
        <div
          ref="registrationsUser"
          v-if="elmenuActive == 1"
          class="charts"
          style="width: 100%; min-height: 130px; max-height: 200px"
        ></div>
      </div>
    </div>
    <div class="borderBottom1 color333">能耗统计</div>
  </div>
</template>
<script>
import axios from "axios";
import { ref, reactive, onMounted } from "vue";
import parsing from "../../assets/js/parsing";
import { ElMessage, ElMessageBox } from "element-plus";
import * as echarts from "echarts";
import api from "../../api/api";
var registrationsUserOption = {
  grid: {
    x: "0%", //距离左边
    x2: "0%",
    y: "1%", // 上距离
    y2: "1%", // 下距离
    // left:"100%",
    containLabel: true,
  },
  title: {
    text: " ",
    textStyle: {
      //文字颜色
      color: "#fff",
      //字体大小
      fontSize: 12,
    },
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  xAxis: {
    type: "value",
    boundaryGap: [0, 0.01],
    axisLine: {
      // show: false,
      lineStyle: {
        color: "#fff",
      },
    },
    // splitLine: { show: false },
  },
  yAxis: {
    type: "category",
    data: ["同比", "环比", "用电量"],
    axisLine: {
      show: false,
      lineStyle: {
        color: "#fff",
      },
    },
    splitLine: { show: false },
    nameTextStyle: {
      //y轴上方单位的颜色
      color: "#333",
    },
    axisLabel: {
      //y轴文字的配置
      textStyle: {
        color: "#333",
      },
    },
  },
  series: [
    {
      name: "",
      type: "bar",
      data: [0, 0, 0],
      barCategoryGap: "40%",
      itemStyle: {
        color: function (params) {
          let color1 = "";
          let color2 = "";
          if (params.dataIndex == 0) {
            color1 = "#FC6E87";
            color2 = "#FC6E87";
          } else {
            color1 = "#3EA2FE";
            color2 = "#3EA2FE";
          }
          return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            {
              offset: 0,
              color: color1,
            },
            {
              offset: 1,
              color: color2,
            },
          ]);
        },
      },
    },
  ],
  legend: {
    // show: false,
    textStyle: {
      color: "#fff",
    },
  },
};
export default {
  components: {   },
  setup(props, conts) {
    const echartsDrawerShow = conts.attrs.echartsDrawerShow;
    const registrationsUser = ref(null);
    const elmenuActive = ref("1");
    onMounted(async () => {
      getelectro();
    });
    const handleClose = () => {
      conts.emit("handleClose", false);
    };
    const electro_From = reactive({
      areaCode: localStorage.getItem("projectAreaCode"),
      dateType: "day",
      startTime: parsing.getFifteendays(),
      endTime: parsing.getcurrentdate(),
    });
    //用电分析 按日
    const electroList = ref([]);
    const electroShow = ref(true);
    const electrodata = ref({});
    const getelectro = () => {
      electroList.value = [];
      electroShow.value = false;
      if (active_data.value == 1) {
        electro_From.dateType = "day";
      } else if (active_data.value == 2) {
        electro_From.dateType = "month";
      } else if (active_data.value == 3) {
        electro_From.dateType = "year";
      }

      api
        .postFormAPI(
          "backup/electricityArea/areaElectricityDataInfo",
          electro_From
        )
        .then((res) => {
          if (res.data.code == 1) {
            electroShow.value = true;
            electrodata.value = res.data.data;
            electroList.value = res.data.data.powerConsumptionCountList;
            // 初始化
            let barChartUser = echarts.init(registrationsUser.value);
            //  data: ["同比", "环比", "用电量"],
            registrationsUserOption.series[0].data = [
              electrodata.value.totalSameComparePower,
              electrodata.value.totalChainPower,
              electrodata.value.totalPower,
            ];
            barChartUser.setOption(registrationsUserOption);
            window.addEventListener("resize", function () {
              //自适应大小, 不用的话不会自适应大小。
              barChartUser.resize();
            });
          } else {
            ElMessage.error(res.data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    };
    // 按月
    const getsumMonthly = () => {
      electroList.value = [];
      electroShow.value = false;
      api
        .postFormAPI("data/regionElectricity/sumMonthly", electro_From)
        .then((res) => {
          if (res.data.code == 1) {
            for (var i = 0; i < res.data.data.length; i++) {
              res.data.data[i].value = res.data.data[i].alarmNum;
            }
            electroList.value = res.data.data;
            electroShow.value = true;
          } else {
            ElMessage.error(res.data.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    };
    const active_data = ref(1);
    const handleSearch = () => {
      getelectro();
    };
    const datavalue = ref([parsing.getFifteendays(), parsing.getcurrentdate()]);
    // parsing.getcurrentdate(), parsing.getcurrentdate()
    const m_y_value = ref("");
    const is_week_disabled = ref(true);

    const is_data_disabled = ref(true);
    const changedata = (res) => {
      console.log(res);
      if (active_data.value == 1) {
        electro_From.startTime = res[0];
        electro_From.endTime = res[1];
        setdisabled(res[1], res[0]);
      } else if (active_data.value == 2) {
        electro_From.startTime = res + "-01";
        let arr = res.split("-");
        electro_From.endTime = parsing.getMonthLast(arr[0], arr[1]);
      } else if (active_data.value == 3) {
        electro_From.startTime = res + "";
        electro_From.endTime = "";
      }
    };
    const setdisabled = (data1, data2) => {
      var numberdays = parsing.DateDifference(data1, data2);
      console.log(numberdays);
      if (numberdays > 15) {
        ElMessage.error("按日查询15天以内");
        is_data_disabled.value = false;
        return;
      } else {
        is_data_disabled.value = true;
      }
      //  else if (numberdays >= 2 && numberdays <= 7) {
      //   is_week_disabled.value = true;
      //   is_data_disabled.value = false;
      // } else if (numberdays >= 8 && numberdays <= 30) {
      //   is_week_disabled.value = false;
      //   is_data_disabled.value = false;
      // } else if (numberdays >= 31 && numberdays <= 180) {
      //   is_week_disabled.value = false;

      //   is_data_disabled.value = true;
      // } else if (numberdays >= 181 && numberdays <= 366) {
      //   is_week_disabled.value = true;
      //   is_data_disabled.value = true;
      // } else {
      //   is_week_disabled.value = true;
      //   is_data_disabled.value = true;
      // }
    };
    const handledata = (index) => {
      active_data.value = index;
      electro_From.startTime = "";
      electro_From.endTime = "";
      is_data_disabled.value = true;
      if (index == 1) {
        electro_From.startTime = parsing.getFifteendays();
        electro_From.endTime = parsing.getcurrentdate();
        datavalue.value = [parsing.getFifteendays(), parsing.getcurrentdate()];
      } else if (index == 2) {
        m_y_value.value = parsing.getCurrentMonth();
        electro_From.startTime = parsing.getCurrentMonth() + "-01";
        electro_From.endTime = parsing.getcurrentdate();
      } else if (index == 3) {
        m_y_value.value = parsing.getCurrentYear() + "";
        electro_From.startTime = parsing.getCurrentYear() + "";
        electro_From.endTime = "";
      }

      getelectro();
    };
    const handleExport = () => {
      // getdownload();
    };
    const getdownload = (code) => {
      axios({
        method: "GET",
        url: api.getUrl() + "backup/excel/download?code=" + code,
        responseType: "blob",
      })
        .then((resdata) => {
          download(resdata.data, "用电分析统计.xlsx");
        })
        .catch((err) => {
          // if (!handleError(err.response)) {
          //   error(err);
          // }
        });
    };
    const handleselect = (res) => {
      elmenuActive.value = res;
    };
    return {
      elmenuActive,
      active_data,
      is_data_disabled,
      is_week_disabled,
      registrationsUser,
      electrodata,
      electroList,
      datavalue,
      m_y_value,
      electroShow,
      echartsDrawerShow,
      handleClose,
      handleSearch,
      changedata,
      handledata,
      handleExport,
      handleselect,
    };
  },
};
</script>
<style lang="less" scoped>
@import "../../assets/css/common.css";
@import "./module.less";
.el-button-group > .el-button::after {
  border-left: 1px solid #1890ff !important;
  border-right: 1px solid #1890ff !important;
}
</style>
